<template>
  <!-- 根节点：清掉外部 20 px 上/左边距，标签之间用 gap 代替 mr -->
  <div class="flex flex-wrap gap-2 mt-0 ml-0 mt-[-4px]" >
    <el-tag
      v-for="(item, index) in tabs"
      :key="index"
      :label="item.label"
      :name="item.index"
      :icon="item.icon"
      :path="item.path"
      :closable="item.index !== 'Home'"
      :effect="route.name === item.label ? 'dark' : 'plain'"
      round
      @click="handleTagClick(item)"
      @close="handleTagClose(item, index)"
    >
      {{ item.label }}
    </el-tag>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAllDataStore } from '@/stores'

const store = useAllDataStore()
const route = useRoute()
const router = useRouter()

const tabs = computed(() => store.getTabsData())

function handleTagClick(item: any) {
  router.push(item.index)
  store.setTabsData(item)
}

function handleTagClose(item: any, index: number) {
  store.removeTagsData(item)
  if (route.name !== item.label) return
  const leftTabs = store.getTabsData()
  router.push(leftTabs[index - 1]?.index ?? leftTabs[index]?.index)
}
</script>
